<template>
  <div class="goods">
    <scroll 
      ref="menu" 
      :data="goods" 
      class="menu"
    >
      <ul class="menu-wrapper">
        <li
          ref="menuGroup"
          :class="['menu-item', {'current-item': currentTopic === index}]"
          v-for="(item, index) in goods" 
          :key="index" 
          @click="scrollTo(index)"
        >
          <span class="text border-bottom">
            <!-- <i 
              v-show="item.type>0"
              :class="['icon', supportClass[item.type]]"
            ></i> -->
            <support-icon :type="item.type" :size="3" v-show="item.type>0"></support-icon>
            {{item.name}}
          </span>
        </li>
      </ul>
    </scroll>
    
    <scroll 
      ref="foods" 
      :data="goods" 
      class="foods"
      :listen-scroll="listenScroll"
      :probe-type="probeType"
      @scroll="scroll"
    >
      <ul class="foods-wrapper">
        <li
          class="food-list"
          v-for="(item, index) in goods"
          :key="index"
          ref="foodGroup"
        >
          <h1 class="title">{{item.name}}</h1>
          
          <ul class="foods">
            <li
              class="food-item border-bottom"
              v-for="food in item.foods"
              :key="food.sellCount"
              @click="selectFood(food)"
            >
              <div class="icon">
                <img :src="food.icon" width="57" height="57" alt="">
              </div>

              <div class="content">
                <h2 class="name">{{food.name}}</h2>
                
                <p class="desc">{{food.description}}</p>
                
                <div class="extra">
                  <span class="count">月售{{food.sellCount}}</span><span>好评率{{food.rating}}</span>
                </div>
                
                <div class="price">
                  <span class="now">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                </div>

                <div class="cartcontrol-wrapper">
                  <cartcontrol :food="food" @cartAdd="cartAdd"></cartcontrol>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </scroll>
    <div class="shopcart-wrapper">
      <shopcart ref="shopcart" :selectFoods="selectFoods" :deliveryPrice="sellerInfo.deliveryPrice" :minPrice="sellerInfo.minPrice"></shopcart>
    </div>
    <food-detail @cartAdd="cartAdd" :food="selectedFood" ref="foodDetail" class="food-detail"></food-detail>
  </div>
</template>

<script>
import Scroll from '@/base/scroll/scroll'
import Shopcart from '@/components/shopcart/shopcart'
import Cartcontrol from '@/components/cartcontrol/cartcontrol'
import FoodDetail from '@/components/food-detail/food-detail'
import SupportIcon from '@/components/support-icon/support-icon'

import {ERR_OK} from '@/api/config.js'

const GOOD_HEIGHT = 54
export default {
  name: 'Goods',
  data() {
    return {
      goods: [],
      scrollY: -1,
      currentTopic: 0,
      supportClass: [
        "decrease",
        "discount",
        "guarantee",
        "invoice",
        "special"
      ],
      selectedFood: {}
    }
  },
  props: {
    sellerInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    selectFoods() {
      let foods = []
      this.goods.forEach(good => {
        good.foods.forEach(food => {
          if(food.count) {
            foods.push(food)
          }
        })
      })
      return foods
    }
  },
  methods: {
    scroll(pos) {
      this.scrollY = pos.y
    },
    scrollTo(index, changeFoodsPos = true) {
      let _index = index
      if (index <= Math.floor(this.goods.length/2) - 1) {
        _index = 0
      }

      if(changeFoodsPos) {
        this.currentTopic = index
        this.$refs.foods.scrollToElement(this.$refs.foodGroup[index], 0)
      }
      this.$refs.menu.scrollToElement(this.$refs.menuGroup[_index], 0)
    },
    _calculateHeight() {
      // 计算 foods 每一项的高度
      this.listHeight = []
      const list = this.$refs.foodGroup
      let height = 0
      this.listHeight.push(height)
      for( let i=0; i<list.length; i++ ) {
        let item = list[i]
        height += item.clientHeight
        this.listHeight.push(height)
      }
      this.goodsHeight = GOOD_HEIGHT * this.goods.length
    },
    _getGoods() {
      this.$axios.get('/api/goods')
        .then(res => {
          res = res.data
          if(res.errno === ERR_OK) {
            this.goods = res.data
          }
        })
    },
    cartAdd(target) {
      // 优化体验，异步执行下落动画
      this.$nextTick(() => {
        this.$refs.shopcart.drop(target)
      })
    },
    selectFood(food) {
      this.selectedFood = food
      this.$refs.foodDetail.show()
    }
  },
  watch: {
    goods() {
      setTimeout(() => {
        this._calculateHeight()
      }, 20)
    },
    scrollY(newY) {
      const listHeight = this.listHeight
      if(newY > 0) { // 滚动到顶部
        this.currentTopic = 0
        return
      }
      // 在中间部分滚动
      for(let i = 0; i < listHeight.length-1; i++) {
        let height1 = listHeight[i],
            height2 = listHeight[i+1]
        if(-newY >= height1 && -newY < height2) {
          this.currentTopic = i
          this.scrollTo(i, false)
          return
        }
      }
      // 到达底部
      this.currentTopic = 0
      this.currentTopic = listHeight.length - 2
    }
  },
  created() {
    this._getGoods()
    this.listHeight = []
    this.listenScroll = true
    this.probeType = 3
  },
  components: {
    Scroll,
    Shopcart,
    Cartcontrol,
    FoodDetail,
    SupportIcon
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/stylus/mixin.styl'
  .goods
    overflow hidden
    display flex
    position absolute 
    top 174px
    bottom 46px
    width 100%
    .menu
    .foods
      height 100%
    .menu-wrapper
      flex 0 0 80px
      width 80px
      background #f3f5f7
      .current-item
        background #ffffff
      .menu-item
        display table
        height 54px
        width 56px
        padding 0 12px
        line-height 14px
        .text
          display table-cell
          width 56px
          font-size 12px
          vertical-align middle
          border-color(rgba(7,17,27,.1))
          & >>> .icon
            width 12px
            height 12px
            margin-right 2px
            background-size 12px 12px
    .foods-wrapper
      flex 1
      .title
        padding-left 14px
        height 26px
        line-height 26px
        border-left 2px solid #d9dde1
        font-size 12px
        color rgb(147,153,159)
        background #f3f5f7
      .food-item
        display flex
        margin 18px
        padding-bottom 18px
        border-color(rgba(7,17,27,.1))
        &:last-child
          margin-bottom 0
          border-none()
        .icon
          flex 0 0 57px
          margin-right 10px
        .content
          flex 1
          .name
            margin 2px 0 8px
            height 14px
            line-height 14px
            color rgb(7,17,27)
          .desc
          .extra
            line-height 10px
            font-size 10px
            color rgb(147, 153, 159)
          .desc
            margin-bottom 8px
            line-height 12px
          .extra
            .count
              margin-right 12px
          .price
            font-weight 700
            line-height 24px
            .now
              margin-right 18px
              font-size 14px
              color rgb(240,20,20)
            .old
              text-decoration line-through
              font-size 10px
              color rgb(147,153,159)
          .cartcontrol-wrapper
            position absolute
            right 0
            bottom 12px
    .shopcart-wrapper
      position fixed
      left 0
      bottom 0
      width 100%
      height 48px
      z-index 9
    .food-detail
      position fixed
      
</style>
